<template>
  <div>
    <div class="admin-top">
      <h3>到岗率配置</h3>
      <div class="num">
        <div>
          当
          <el-time-select
            v-model="date.time"
            :picker-options="{
              start: '00:00',
              step: '00:60',
              end: '23:00',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
          <span>点前打卡人数,小于</span>
          <el-input-number
            v-model="date.numbers"
            controls-position="right"
            @change="handleChange"
            size="small"
            :min="1"
            style="margin: 0 10px 0 10px"
          ></el-input-number>
          <span>人在线时产生预警提醒</span>
          <!-- <span style="font-size: 12px; margin-left: 10px"
            >(时间选择为整点)</span
          > -->
        </div>
        <button @click="save">保存配置</button>
      </div>
    </div>
  </div>
</template>
<script>
// searchSchool
import { editDutyConfig, dutyConfig } from "@/api/dgl";
// import VueCookie from "vue-cookies";
import VueCookie from "vue-cookies";
// import bus from "../../common/bus";
export default {
  name: "attendanceRate",
  components: {},
  data() {
    return {
      date: {
        time: "",
        numbers: 1,
        token: JSON.parse(localStorage.getItem("userInfo")).token,
      },
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let that = this;
      await dutyConfig({
        token: JSON.parse(localStorage.getItem("userInfo")).token,
      }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          that.date.time = JSON.stringify(res.data.time);
          that.date.numbers = res.data.numbers;
        } else {
          that.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    handleChange(value) {
      console.log(value);
    },
    save() {
      console.log(this.date);
      editDutyConfig(this.date).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
        } else if (res.code == 400) {
          this.$message({
            message: res.message,
            type: "fail",
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.admin-top {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  width: 100%;

  box-sizing: border-box;
  height: 160px;
}
.admin-top {
  width: calc(100%);
}
.admin-top h3 {
  text-align: left;
  font-size: 16px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #13213b;
  height: 42px;
}
/deep/.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 70px !important;
  height: 32px !important;
}
/deep/.el-input--prefix .el-input__inner {
  padding: 0;
  text-align: center;
}
/deep/.el-input__prefix {
  display: none;
}
/deep/.el-input-number {
  position: relative;
  display: inline-block;
  width: 100px;
  // line-height: 38px;
}
button {
  width: 111px;
  height: 36px;
  background: #126bff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: none;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  position: relative;
  top: 15px;
}
.num {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: space-around;
  align-items: flex-start;
  height: 80px;
}
</style>

